<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所有的课程</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var pagNo=1;
            function loadData() {
                $.get("subjectSearch.do", {p: pagNo}, function (data) {
                    //alert(data);
                    // data=JSON.parse(data);
                    var table = $("#subject");
                    table.empty();
                    $.each(data, function (i, d) {
                        var t = $("<tr></tr>");
                        t.append("<td>" + d.id + "</td>");
                        t.append("<td>" + d.subjectname + "</td>");
                        t.append("<td>" + d.classhour + "</td>");
                        //t.appendTo(table);
                        table.append(t);
                    });
                });
            }
            loadData();


            $("a#prev").click(function () {
                pagNo--;
                //pageNo>=1
                loadData();
                return false;
            });

            $("a#next").click(function () {
                pagNo++;
                loadData();
                return false;
            });
            //$
            $("a#add").click(function () {
                $("#addSubjectForm").show();
                return false;
            });
            $("#save").click(function () {
                //form
                //{sujectname:xx,classhour:}
                alert($("#subjectForm").serialize());
                $.post("addsubject",$("#subjectForm").serialize(),function () {
                    $("#addSubjectForm").hide();
                    loadData();
                });
            });
        });
    </script>
</head>
<body>
<a href="addsubject.html" id="add">增加一门新课程</a>
   <table id="subject" border="2" cellspacing="0" cellpadding="0"></table>
<p align="left">
    <a href="#" id="prev">上一页</a>
    <a href="#" id="next">下一页</a>
</p>

<div style="display: none;position: relative;top: 49px;left: 30px" id="addSubjectForm">
    <form id="subjectForm">
        <input type="text" name="subjectname" placeholder="课程名"/>
        <input type="number" name="classhour" placeholder="课程学时"/>
        <input type="text" name="gradeid" placeholder="gid"/>
        <input type="button" value="保存" id="save">
    </form>
</div>
</body>
</html>